<template>
	<div class="NewsInfo" >
		<!-- 标题 -->
		<div class="header">
			<h1>{{newslist.title}}</h1>
			<div class="subtitile">
				<span>发表时间:{{ newslist.add_time | dateFormat }}</span>
				<span>点击次数:{{ newslist.click }}</span>
			</div>

		</div>
		<hr>
		<!-- 内容 -->
		<div class="content" v-html="newslist.content">
		</div>
		<!-- 评论 -->
		<comment-box :id="this.id"></comment-box>
	</div>

</template>

<script>
import comment from '../subcomponents/comment.vue'
import { Toast } from 'mint-ui'
	export default {
		data () {
			return {
				id : this.$route.params.id,
				newslist : []
			}
		},
		created() {
			this.getNewslist()
		},
		methods : {
			getNewslist() {
				this.$http.get('api/getnew/'+this.id).then(result=>{
					if(result.body.status == 0){
						this.newslist = result.body.message[0]
					}else {
						Toast ("获取新闻资讯失败！")
					}
				})
			}
		},
		components : {
			'comment-box' : comment
		}

	};
</script>
<style lang="scss">
	.NewsInfo {
		.header {
			h1 {
				color : red ;
				font-size :16px;
				text-align : center;
				padding : 5px 2px;
			}
			.subtitile {
				display : flex;
				justify-content : space-between;
				color : #226aff;
				font-size :13px;
				padding : 0 4px;
			}
		}
		.content {
			padding :0 4px;
			img {
				width :100%;
			}
		}
	}
</style>
